<template>
    <div>
        <div v-title>账单详情</div>
        <div class="top">
            <i class="iconfont icon-yiwancheng"></i>
            <div class="one">保单总额</div>
            <div class="two">{{datalist.OrderAmount}}</div>
            <div class="three">（包含手续费:￥{{datalist.ServiceCharge}}）</div>
        </div>
        <div class="top" style="margin-top:10px">
            <div class="mainone">
                <span class="left">保单期限</span>
                <span class="right">
                    {{datalist.StartTime.split(' ')[0]}}至{{datalist.EndTime.split(' ')[0]}}
                </span>
            </div>
            <div class="maintwo">
                <span class="left">付款期数</span>
                <span class="right">{{datalist.PeriodsNumber}}期</span>
            </div>
        </div>
    </div>
</template>
<script>
import api from '../fetch/api.js'
export default {
    data() {
        return {
            datalist: '',
        }
    },
    mounted() {
        this.GetOneModel()
    },
    methods: {
        GetOneModel() {
            api.GetOneModel({ ID: 1 }).then(res => {
                this.datalist = res
            })
        },
    },
};
</script>
<style src="../css/iconfont.css"></style>
<style scoped>
.iconfont {
    font-size: 40px;
    float: right;
    color: #999999;
    position: absolute;
    right: 3%;
    top: -1px;
}

.top {
    background: #fff;
    position: relative;
}

.top>div {
    width: 90%;
    margin: 0px auto;
}

.one {
    color: #666666;
    font-size: 14px;
    padding-top: 15px;
    padding-bottom: 5px;
    text-align: center;
}

.two {
    color: #f33e16;
    font-size: 30px;
    text-align: center;
}

.three {
    color: #999999;
    font-size: 12px;
    text-align: center;
    padding: 5px;
    padding-bottom: 15px;
}

.left {
    font-size: 14px;
    color: #999999;
}

.right {
    color: #333333;
    font-size: 14px;
    float: right;
}

.mainone {
    padding: 10px;
}

.maintwo {
    padding-bottom: 10px;
}
</style>